<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>        
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .head {
            width: 250px;
            margin: 0 auto;
        }

        .head p {
            height: 34px;
            line-height: 34px;
            padding-left: 20px;
            font-size: 13px;
            font-weight: 700;
            background-color: pink;
        }

        .head ul li {
            /* 高度为0时就溢出所有的内容，并且隐藏 */
            overflow: hidden;
            height: 0;
            transition: all .7s ease 0s;
            line-height: 34px;
            font-size: 16px;
            padding-left: 30px;
            color: pink;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="head">
        <p>语言</p>
        <ul class="acc0">
            <li>Java</li>
            <li>javascript</li>
            <li>python</li>
        </ul>

        <p>运动</p>
        <ul  class="acc1">
            <li>足球</li>
            <li>羽毛球</li>
            <li>篮球</li>
        </ul>
        
        <p>乐器</p>
        <ul  class="acc2">
            <li>钢琴</li>
            <li>手风琴</li>
        </ul>
        
        <p>男装</p>
        <ul  class="acc3">
            <li>T恤</li>
            <li>皮衣夹</li>
            <li>西服套装</li>
        </ul>        
        <p>配饰</p>
        <ul  class="acc4">
            <li>女士围巾</li>
            <li>大衣毛衣</li>
        </ul>
    </div>
    <script>
        var ps = document.querySelectorAll('p'); // 获取标题p
        var qlis = document.querySelectorAll('li'); // 获取 全部的li
        // var num = 0;
        for (let i = 0; i < ps.length; i++) {
            ps[i].onclick = function () { // 给标题加上点击事件
                var lis = document.querySelector(`.acc${i}`).querySelectorAll('li'); // 点击哪个标题p获取那个标题下面的所有li
                for (let k = 0; k < qlis.length; k++) { // 在增加高度前 清除之前的所有高度 排他思想
                    qlis[k].style.height = '0px';
                }
                for (let j = 0; j < lis.length; j++) { // 给获取的所有的li增加高度
                        lis[j].style.height = '34px';
                    }
            }
        }
    </script>
</body>
</html>